<template>
	<Grid :col="3" :border="false" padding="5px" v-auth:user:view:search>
	  <GridItem> <Input  placeholder="请输入用户名" v-model="search.username" /></GridItem>
	  <GridItem><Input  placeholder="请输入真实姓名" v-model="search.realName" /></GridItem>
	  <GridItem><Input  placeholder="请输入角色名" v-model="search.roleName" /></GridItem>
	  <GridItem> <Input  placeholder="请输入部门名" v-model="search.departName" /></GridItem>
	  <GridItem><Input  placeholder="请输入岗位名" v-model="search.jobName" /></GridItem>
	  <GridItem>
		  <Select v-model="search.locked" style="width:100%" clearable  placeholder="请选择用户的状态">
			  <Option v-for="item in statusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
		  </Select>
	  </GridItem>
	  <GridItem><Input  placeholder="请输入手机号" v-model="search.tel" /></GridItem>
	  <GridItem>
        <DatePicker  v-model="times" clearable :editable="false"
              type="daterange" confirm placement="bottom-end" split-panels
                    placeholder="请选择入职时间" style="width: 100%;"/>
    </GridItem>
	  <GridItem><Button icon="md-search" type="primary" @click="searchData">查询</Button></GridItem>
	</Grid>
	
	<Grid :col="1" :border="false" padding="5px" v-auth:user:view:add>
	  <GridItem><Button icon="md-add-circle" type="primary" @click="$emit('add-user')">新增用户</Button></GridItem>
	</Grid>
</template>

<script>

export default {
  props: {
    modelValue: {
      type: Object,
      required: true ,
    }
  },
	data() {
		return {
      times: ["", ""],
      search: {...this.modelValue },
			statusList: [{label: '正常',  value: 0},  {label: '锁定', value : 1}]
		}
	},
	emits: ['add-user', 'update:model-value', 'search'] ,
  watch: {
    times: function(array) {
       this.search.start = this.formatDate(array[0]) ;
       this.search.end = this.formatDate(array[1]) ;
    }
  },
  methods: {
     formatDate(date) {
        if (date === "") return null ;
        let year = date.getFullYear();
        let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1 ;
        let day =date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        return `${year}-${month}-${day}`
     },
    searchData() {
       // 获取 用户录入的所有参数, 并返回给 父组件
       this.$emit("update:model-value", this.search);
      this.$emit("search", this.search);
    }
  }
}

</script>

<style>
</style>